<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="layouts/default">
<head>
    <title>FundRequest - Your Request</title>
</head>
<body>
<th:block layout:fragment="content">
    <section class="section section--header mb-5">
        <div class="media">
            <div class="d-none d-md-flex header-image">
                <i class="fa fa-list fa-10x text-secondary"></i>
            </div>
            <div class="media-body">
                <h1 class="text-secondary">
                    <span class="d-inline-block d-md-none">
                        <i class="fa fa-list fa-1x text-secondary"></i>
                    </span>
                    Overview of your requests
                </h1>

                <div class="section--header__description">
                    <p>
                        Quick and easy way to filter through your issues, view completed, ongoing or even pending
                        requests.
                    </p>
                </div>
                <div class="d-flex justify-content-between">
                    <a class="btn btn-link text-secondary" th:href="@{'#faq'}">
                        How it works...
                    </a>
                    <a class="btn btn-secondary" th:href="@{/fund/github}">
                        Start new
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section>
        <request-list
                :phase-filter-default="'open'"
                th:attr="'v-bind:requests'=${requests},
                          'v-bind:projects'=${projects},
						 'v-bind:is-authenticated'=${isAuthenticated}"
                :filters="[
                    { value: 'all', title: 'All', description: 'Showing an overview of all your requests, including funds that are pending.' },
                    { value: 'open', title: 'Open', description: 'Showing an overview of all your open requests, including funds that are pending.' },
                    { value: 'resolved', title: 'Resolved', description: 'Showing an overview of all your resolved requests.' },
                    { value: 'closed', title: 'Closed', description: 'Showing an overview of all your closed requests.' },
                    { value: 'starred', title: 'Starred', description: 'Showing an overview of all the requests that you have starred.' },
                 ]">
            <template slot-scope="{phaseFilter}">
                <request-list-pending-funds
                     th:attr="'v-bind:funds'=${pendingFunds}"
                     v-if="(phaseFilter==='open' || phaseFilter==='all')">
                </request-list-pending-funds>
            </template>
        </request-list>
    </section>

    <section class="mb-2" id="faq" ref="faq">
        <faq v-bind:location="'/rest/faq/requests'"></faq>
    </section>
</th:block>

<th:block layout:fragment="css">
</th:block>

</body>
</html>
